<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019/9/28
  Time: 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> -->
    <title>Document</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <!-- 引入swiper框架的样式文件 -->
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="${path}/css/traveler/swiper/swiper.min.css" type="text/css">

    <%--<link rel="stylesheet" href="${path}/css/traveler/animate.css" type="text/css">--%>
    <%--<link rel="stylesheet" href="${path}/css/traveler/font-awesome.css" type="text/css">--%>
    <%--<link rel="stylesheet" href="${path}/css/traveler/style.css" type="text/css">--%>
    <link rel="stylesheet" href="${path}/css/traveler/traveler_list.css">


</head>

<body>

<!--响应式导航-->
<%@include file="../common/nav_top.jsp" %>

<!--轮播 - banner - begin-->
<div class="banner_container">
    <div class="container">
        <ul id="banner-box">
            <li style="z-index: 3;opacity: 1;">
                <a href="">
                    <img src="http://pzgv309jp.bkt.clouddn.com/ef9475e7-5d9d-4f9b-a5e7-38f3fdd5d2f9.jpg" alt="">
                    <div class="text-box">
                        <p><span>11</span>/Dec.2017</p>
                        <h2>唯有旅行与美食，不负时光</h2>
                    </div>
                </a>
            </li>
            <li style="z-index: 1;opacity: 1;">
                <a href="">
                    <img src="https://n4-q.mafengwo.net/s14/M00/78/71/wKgE2l15xeyAGP_NAAbXnvbYGdA308.jpg?imageMogr2%2Finterlace%2F1"
                         alt="">
                    <div class="text-box">
                        <p><span>11</span>/Dec.2017</p>
                        <h2>印度尼西亚︱我的人生伏笔，从东爪哇到巴厘岛</h2>
                    </div>
                </a>
            </li>
            <li style="z-index: 1;opacity: 1;">
                <a href="">
                    <img src="http://pzgv309jp.bkt.clouddn.com/aa5ab1e5-03aa-4cf7-91f0-8a88998ca4d4.jpg" alt="">
                    <div class="text-box">
                        <p><span>11</span>/Dec.2017</p>
                        <h2>天地山水，超你所愿（附12天加拿大自驾指南）</h2>
                    </div>
                </a>
            </li>
            <li style="z-index: 1;opacity: 1;">
                <a href="">
                    <img src="http://pzgv309jp.bkt.clouddn.com/224a880e-d2dd-4fca-8300-eacf8015951d.jpg" alt="">
                    <div class="text-box">
                        <p><span>11</span>/Dec.2017</p>
                        <h2>锦州 | 2天暴食13顿，这是一座来了没时间观光的城市！</h2>
                    </div>
                </a>
            </li>
            <li style="z-index: 1;opacity: 1;">
                <a href="">
                    <img src="https://b3-q.mafengwo.net/s14/M00/43/49/wKgE2l12JriAGm53AAduwcseKIs827.jpg?imageMogr2%2Finterlace%2F1"
                         alt="">
                    <div class="text-box">
                        <p><span>11</span>/Dec.2017</p>
                        <h2>澳之秘境，倾翻的浪漫盐池——西澳南澳自驾笔记</h2>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <ul id="banner-index-box" class="banner-index-box">
        <li class="banner-index-active">
            <img src="http://pzgv309jp.bkt.clouddn.com/ef9475e7-5d9d-4f9b-a5e7-38f3fdd5d2f9.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="https://n4-q.mafengwo.net/s14/M00/78/71/wKgE2l15xeyAGP_NAAbXnvbYGdA308.jpg?imageMogr2%2Finterlace%2F1"
                 alt="">
            <span></span>
        </li>
        <li>
            <img src="http://pzgv309jp.bkt.clouddn.com/aa5ab1e5-03aa-4cf7-91f0-8a88998ca4d4.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="http://pzgv309jp.bkt.clouddn.com/224a880e-d2dd-4fca-8300-eacf8015951d.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="https://b3-q.mafengwo.net/s14/M00/43/49/wKgE2l12JriAGm53AAduwcseKIs827.jpg?imageMogr2%2Finterlace%2F1"
                 alt="">

            <span></span>
        </li>
    </ul>
</div>

<!-- 轮播 end -->

<div class="container-fluid">
    <div class="row">
        <div style="text-align: center;margin-top: 20px;padding:5px;">
            <font size="6px" color="black">悠&nbsp;U&nbsp;达&nbsp;人</font><br>
            <font size="3px" color="gray">每一位达人哈哈哈哈哈</font>

        </div>
        <div style="margin-bottom: 25px">
            <div style="position:relative;width:30%;left:-90px;top:0;">
                <div style="width: 20%;float:right">
                    <a class="btn btn-primary btn-rounded btn-block" href="${path}/apply"
                       style="width: 160px;">
                        <font size="2px" color="black">申请成为悠U达人>></font>

                    </a>

                </div>
            </div>
            <div style="position:relative;width:30%;left:77%;top:5px;;">
                <a onclick="flu()">
                    <font size="2px" color="gray">更多达人>></font>
                </a>
            </div>
        </div>
    </div>
</div>

<div id ="random">

</div>
<!-- Swiper -->
<%--<div class="swiper-container">--%>
    <%--<div class="swiper-wrapper">--%>

        <%--<c:forEach items="${requestScope.userTables}" var="n">--%>
            <%--<div class="swiper-slide">--%>
                <%--<a href="${path}/travelerInfoDis/travelerInfo?id=${n.id}">--%>
                    <%--<div class="card middle">--%>
                            <%--&lt;%&ndash;<!-- 正面页面${n.headImg} -->&ndash;%&gt;--%>
                        <%--<div class="front"--%>
                             <%--style="background-image: url(${n.headImg});background-repeat: no-repeat;--%>
                                     <%--background-size: 100% 100%;--%>
                                     <%---moz-background-size: 100% 100%;">--%>
                            <%--<!-- <img src="../../imgs/travler/travler1.jpg"/> -->--%>
                            <%--<div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">--%>
                                <%--<font size="3px" color="whitesmoke">/&nbsp;&nbsp;${n.username}&nbsp;&nbsp;/</font>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                        <%--<!-- 后面页面 -->--%>
                        <%--<div class="back">--%>
                            <%--<!-- 上榜部分背景颜色 -->--%>
                            <%--<div style="width:100%;height:30%; background-color:turquoise;"></div>--%>
                            <%--<!-- 头像盒子绝对定位-层数改变 -->--%>
                            <%--<div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">--%>
                                <%--<img src="${n.headImg}" class="img-circle headerImg2" style=" width: 100px;--%>
<%--height: 100px;">--%>
                            <%--</div>--%>
                            <%--<div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">--%>
                                <%--<font size="3px" color="black">/&nbsp;&nbsp;${n.username}&nbsp;&nbsp;/</font>--%>
                            <%--</div>--%>
                            <%--<!-- 标签 -->--%>
                            <%--<div--%>
                                    <%--style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">--%>

                                <%--<div class="parallelogram">--%>
                                    <%--<font size="1px" color="black">自由摄影师</font>--%>
                                <%--</div>--%>
                                <%--<div class="parallelogram">--%>
                                    <%--<font size="1px" color="black">旅游达人</font>--%>
                                <%--</div>--%>
                                <%--<div class="parallelogram">--%>
                                    <%--<font size="1px" color="black">美食家</font>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                            <%--<!-- 简介 -->--%>
                            <%--<div style="position:absolute;width:70%;height:50px;z-index:2;left:15%;top:65%;">--%>
                                <%--<font size="1px" color="black">${n.intro}</font>--%>
                            <%--</div>--%>

                            <%--<div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">--%>
                                <%--<button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</a>--%>
            <%--</div>--%>
        <%--</c:forEach>--%>

    <%--</div>--%>
    <%--<!-- Add Pagination -->--%>
    <%--<div class="swiper-pagination"></div>--%>
<%--</div>--%>

<!-- 广告 -->
<!--轮播 - banner - begin-->
<div class="container " id="lunbo"
     style="border:2px solid blanchedalmond;margin-top: 0px;height: 15px;margin-top: 55px;">
    <div class="row">
        <!-- <nav class="narbar navbar-fixed-top"> -->
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="${path}/imgs/travler/adv1.jpg" alt="First slide">
                </div>
                <div class="item">
                    <img src="${path}/imgs/travler/adv1.jpg" alt="Second slide">
                </div>
                <div class="item">
                    <img src="${path}/imgs/travler/adv1.jpg" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span _ngcontent-c3=""
                                                                                         aria-hidden="true"
                                                                                         class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
        <!-- </nav> -->
    </div>
</div>


<!-- 优质推文 -->

<div class="container-fluid" style="margin-top: 130px;background:#F5F5F5;">
    <div class="row">
        <!-- 标题 -->
        <div class="travlershow" style="text-align: center;margin-top: 20px;margin-top: 60px;">
            <font size="6px" color="black">达人作品SHOW</font><br>

            <font size="3px" color="gray">多彩回忆，记录美好，在这里，等你来</font>
        </div>
    </div>


        <!--作品展示 - 异步分页的区域-->
        <div id="content">

        </div>
    <%--</div>--%>
</div>


<%--目的:为了让外部的js文件使用灵活的项目的上下文路径--%>
<input type="hidden" value="${path}" id="path">

<script>
    $(function () {
        //如果js和jsp在同一个文件中,那么可以在js中使用EL表达式
        //如果js是单独的外部文件,则不允许使用EL表达式
        $("#random").load("${path}/noteAuthorDis/listAuthor");
        <%--$("#tabtwo").load("${path}/travelernoteList/travelernotestime");--%>
    });

</script>

<script>
    $(function () {
        //如果js和jsp在同一个文件中,那么可以在js中使用EL表达式
        //如果js是单独的外部文件,则不允许使用EL表达式
        $("#content").load("${path}/travelernoteList/travelernotes");
        <%--$("#tabtwo").load("${path}/travelernoteList/travelernotestime");--%>
    });

</script>
<script>
    function flu() {
        $("#random").load("${path}/noteAuthorDis/listAuthor");
    }
</script>

<!-- 底部导航 begin -->
<jsp:include page="../common/nav_bottom.jsp"/>
<!-- 底部导航 end -->

<!-- Swiper JS -->
<script src="${path}/js/traveler/swiper/swiper.min.js"></script>
<script src="${path}/H+/js/content.js"></script>
<!-- Initialize Swiper -->

<%--达人展示滑动js--%>
<script src="${path}/js/traveler/swiper/swiper-container.js"></script>

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

<%--轮播js--%>
<script src="${path}/js/traveler/traveler_list/mycarousel.js"></script>

<script src="${path}/js/traveler/traveler_list/contact-box.js"></script>

<script>


    $(function(){
        $(".nav-tabs li").click(function() {
            $(this).siblings('li').removeClass('active');  // 删除其兄弟元素的样式
            $(this).addClass('active');                    // 为点击元素添加类名
        });
    });

    function hots() {
        //点击是高亮
//        $("#hots .a").addClass("active");
//        $("#timenote .a").removeClass("active");

        $("#content").load("${path}/travelernoteList/travelernotes");
    }


    function timenote() {
        //点击是高亮
//        $("#timenote .a").addClass('active');
//        $("#hots .a").removeClass('active');

        $("#content").load("${path}/travelernoteList/travelernotestime");
    }

</script>

</body>

</html>
